<template>
  <div class="app-container">
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      @click="
        centerDialogVisible = true;
        type = 1;
      "
      >添加轮播图</el-button
    >
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- <el-table-column align="center" label="序号" width="100">
        <template slot="header">
          <el-tooltip
            class="item"
            effect="dark"
            content="楼栋唯一标识"
            placement="right-start"
            ><span>序号 <i class="el-icon-warning"></i></span>
          </el-tooltip>
        </template>
        <template slot-scope="{ row, index }">
          <span>{{ (row, index) }}</span>
        </template>
      </el-table-column> -->

      <el-table-column width="200" align="center" label="排序">
        <template slot="header">
          <el-tooltip
            class="item"
            effect="dark"
            content="图片在小程序首页里轮播顺序"
            placement="right-start"
            ><span>排序 <i class="el-icon-warning"></i></span>
          </el-tooltip>
        </template>
        <template slot-scope="{ row }">
          <span>{{ row.sortNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片预览" align="center">
        <template slot-scope="{ row }">
          <!-- <img
            :src="`${api}/attachment/preview?attachmentId=${row.carouselId}`"
            alt=""
          /> -->
          <el-image
            style="width: 70%; height: 180px"
            :src="`${api}/attachment/preview?attachmentId=${row.carouselId}`"
            :preview-src-list="[
              `${api}/attachment/preview?attachmentId=${row.carouselId}`,
            ]"
            fit="cover"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="图片备注" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.remarks }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="openUpdate(row)"
          >
            修改
          </el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-edit"
            @click="deleteSlide(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog
      :title="type ? '新增' : '修改'"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="clearForm"
      :close-on-click-moda="false"
      center
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
        v-if="centerDialogVisible"
      >
        <el-form-item label="图片备注" prop="remarks">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
        <el-form-item label="排列序号" prop="sortNumber">
          <el-input v-model="form.sortNumber" type="number"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" prop="carouselId">
          <el-upload
            class="avatar-uploader"
            :action="`${api}/attachment/upload`"
            :headers="headerObj"
            accept=".jpg,.png"
            :show-file-list="false"
            :data="uploadData"
            :on-success="upSuccess"
          >
            <img
              v-if="form.carouselId"
              :src="`${api}/attachment/preview?attachmentId=${form.carouselId}`"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  GetSlideList,
  addSlideImage,
  SetSlideInfo,
  deleteSlideInfo,
} from "@/api/index";
import { api } from "@/config/index";
export default {
  name: "slideshow",
  data() {
    return {
      api: api, //服务器地址
      list: [], //轮播图数据
      type: 1, //添加：1 编辑 0
      listLoading: true, //数据加载中
      centerDialogVisible: false, //添加修改轮播图的弹窗
      imageUrl: "",
      form: {
        //添加修改轮播图的弹窗的数据
        carouselId: "", //轮播图id
        remarks: "", //备注
        sortNumber: "", //排序序号
      },
      rules: {
        //验证规则
        remarks: [
          { required: true, message: "请输入图片备注", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 20个字符", trigger: "blur" },
        ],
        sortNumber: {
          required: true,
          message: "请输入排列序号",
          trigger: "blur",
        },
        carouselId: {
          required: true,
          message: "请上传图片",
          trigger: "blur",
        },
      },
      pageData: {
        //页参数
        currPage: 1,
        pageSize: 20,
      },
      headerObj: {
        //获取token
        Authorization: getToken("token"), //携带token
      },
      uploadData: {
        //上传图片的信息
        //上传文件信息
        originalName: "iamge",
        type: "SLIDESHOW",
      },
    };
  },
  created() {
    this.getSlideList();
  },
  methods: {
    //获取轮播图数据
    getSlideList() {
      GetSlideList(this.pageData).then((res) => {
        console.log(res.data.data_list);
        this.listLoading = false;
        this.list = res.data.data_list;
      });
    },
    //添加轮播图
    adddSlide() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addSlideImage(this.form).then(() => {
            this.$message.success("添加成功");
            this.centerDialogVisible = false;
            this.getSlideList();
          });
        } else {
          this.$message.error("内容请填写完整");
        }
      });
    },
    //开启修改轮播图
    openUpdate(data) {
      this.centerDialogVisible = true;
      this.form = Object.assign({}, data);
      this.type = 0;
      console.log(this.form);
    },
    //修改轮播图
    updateSlide() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          SetSlideInfo(this.form).then(() => {
            this.$message.success("添加成功");
            this.centerDialogVisible = false;
            this.getSlideList();
          });
        } else {
          this.$message.error("内容请填写完整");
        }
      });
    },
    //删除
    deleteSlide(id) {
      deleteSlideInfo(id).then((res) => {
        this.$message.success("删除成功");
        this.getSlideList();
      });
    },
    //上传图片成功
    upSuccess(data) {
      this.form.carouselId = data.data.id;
    },
    //提交数据
    submit() {
      if (this.type == 1) {
        this.adddSlide();
      } else {
        this.updateSlide();
      }
    },
    async getList() {},
    upDataFloor(row) {},
    addFloor() {},

    //关闭弹窗是初始化数据
    clearForm() {
      this.form = {
        carouselId: "", //轮播图id
        remarks: "", //备注
        sortNumber: "", //排序序号
      };
    },
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 0;
}
.edit-input >>> .el-input__inner {
  text-align: center;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>